<template>
  <div class="order-history" @click="emitClose">
    <div class="g-container">
      <div class="order-history__title">
        <ul>
          <li
            v-for="(item, i) in tabList"
            :key="i"
            :class="{ on: item.code === tab }"
            @click.stop="change(item.code)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div class="g-clickable icon" @click.stop="emitClose">
          <i class="iconfont icon-close"></i>
        </div>
      </div>
      <div class="order-history__list">
        <table class="g-table g-table--no-padding g-table--left">
          <thead>
            <tr>
              <th>
                <span>Hash</span>
              </th>
              <th>
                <span>Height</span>
              </th>
              <th>
                <span>From</span>
              </th>
              <th>
                <span>Amount</span>
              </th>
              <th>
                <span>To</span>
              </th>
              <th>
                <span>MinReturn</span>
              </th>
              <th>
                <span>Status</span>
              </th>
              <th v-if="tab === '01'">
                <span>Operate</span>
              </th>
            </tr>
          </thead>
          <tbody v-if="list.length > 0">
            <tr v-for="(item, i) in list" :key="i">
              <td>
                <a
                  class="order-history__link"
                  :href="`https://bscscan.com/tx/${item.createdTxHash}`"
                  target="_blank"
                  @click.stop
                >
                  {{
                    (item.executedTxHash ||
                      item.cancelledTxHash ||
                      item.createdTxHash) | formatHash
                  }}
                </a>
              </td>
              <td>{{ item.blockNumber }}</td>
              <td>{{ item.inputTokenSymbol }}</td>
              <td>{{ item.inputAmount | formatNumber }}</td>
              <td>{{ item.outputTokenSymbol }}</td>
              <td>{{ item.minReturn | formatNumber }}</td>
              <td>{{ item.status }}</td>
              <td class="operate" v-if="tab === '01'">
                <span @click.stop="cancel(item)">Cancel</span>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="8">
                <Empty />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getOpenOrders, getOrders, cancelLimitOrder } from "@/init";
import Empty from "@/components/Empty";

export default {
  name: "OrderHistory",
  components: {
    Empty,
  },
  data() {
    return {
      list: [],
      loading: false,
      timer: null,
      tab: "01",
      tabList: [
        {
          code: "01",
          name: "Open Orders",
        },
        {
          code: "02",
          name: "Order History",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      account: (state) => state.account,
    }),
  },
  watch: {
    account(val) {
      if (val) {
        this.change(this.tab);
      }
    },
  },
  mounted() {
    this.change(this.tab);
  },
  methods: {
    async change(code) {
      if (!this.account) return;
      this.tab = code;
      if (code === "01") {
        this.list = await getOpenOrders();
      } else {
        this.list = await getOrders();
      }
    },
    async cancel(item) {
      const { id } = item;
      await cancelLimitOrder(id);
    },
    emitClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.order-history {
  padding: 50px 0;
}

.l-container {
  display: flex;
  flex-direction: column;
}

.order-history__title {
  margin: 60px 0 0 0;
  padding: 0 0 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;

  ul {
    display: flex;
    align-items: center;
    li {
      cursor: pointer;
      width: 160px;

      &.on {
        span {
          color: var(--color);
        }
      }
    }
  }

  span {
    font-size: 24px;
    font-family: "Roboto Bold";
    color: var(--color-content);
  }

  .icon {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--icon-color);

    .iconfont {
      font-size: 20px;
      color: var(--color);
    }
  }
}

.order-history__tab {
  margin-top: 20px;
  flex: 1;
  min-height: 0;
}

.order-history__list {
  display: flex;
  flex-direction: column;
  height: 80vh;
  overflow: hidden;
}

.operate {
  span {
    cursor: pointer;
    font-size: 14px;
    font-family: "Roboto Medium";
    color: var(--color-sky-blue);
    text-decoration: underline;
  }
}
</style>
